<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #imgdiv {
            position: relative;
        }

        #imgdiv>img {

            width: 500px;
        }

        #mask {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 250px;
            height: 156px;
            background-color: yellow;
            opacity: .5;
        }

        #big {
            display: none;
            width: 700px;
            height: 438.2px;
            position: absolute;
            left: 510px;
            top: 0px;
            background-color: red;
            z-index: 999;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="imgdiv">
        <img src="作业/1.jpg">
        <div id="mask">

        </div>
        <div id="big">
            <img src="作业/1.jpg" alt="">
        </div>
    </div>

    <script>
        var imgdiv = document.querySelector('#imgdiv');
        var mask = document.querySelector('#mask');
        var big = document.querySelector('#big');

        imgdiv.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
        });

        imgdiv.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });

        imgdiv.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft - 125;
            var y = e.pageY - this.offsetTop - 78;
            if(x<0){x=0}
            if(y<0){y=0}
            if(x>250){x=250}
            if(y>156){y=156}
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';

            big.children[0].style.marginLeft = -(x*3.6) + 'px';
            big.children[0].style.marginTop = -y*3.6 + 'px';
        });

    </script>
</body>

</html>